<template>
  <BottomDialog :is-show="props.isShow">
    <template #prepend-icon>
      <Icon size="16" name="arrowLeft" @click="to(AUTH_ROUTES.SIGN_UP)"></Icon>
    </template>
    <template #title>
      <p class="text-center text-white font-size-16 font-weight-500 line-height-140 font-style-normal">
        {{ $t('title.setPassword') }}
      </p>
    </template>
    <template #append-icon>
      <slot name="append-icon"></slot>
    </template>
    <template #body>
      <v-form class="gap-col-8">
        <div>
          <InputWrap
            v-model="password.value"
            :label="$t('label.password')"
            :placeholder="$t('placeholder.password')"
            :err-msg="password.error"
            password
          ></InputWrap>
          <PasswordStrength :password="password.value"></PasswordStrength>
        </div>
        <PasswordValidation :password="password.value" @update:validate="(v) => (validation = v)"></PasswordValidation>
        <InputWrap
          v-model="confirmPassword.value"
          :label="$t('label.confirmPassword')"
          :placeholder="$t('placeholder.confirmPassword')"
          :err-msg="confirmPassword.error"
          password
        ></InputWrap>
        <div class="mt-4">
          <BlockButton :label="$t('common.next')" @click="onNextClicked()" :is-gradient="false"></BlockButton>
        </div>
      </v-form>
    </template>
  </BottomDialog>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { VForm } from 'vuetify/components'
import { storeToRefs } from 'pinia'
import { useAuthRouteStore } from '@/store/auth-route'
import { useSignUpStore } from '@/store/sign-up'
import { useYup, validate } from '@/plugins/yup'
import BlockButton from '@/components/button/BlockButton.vue'
import BottomDialog from '@/components/dialogs/BottomDialog.vue'
import InputWrap from '@/components/form/InputWrap.vue'
import PasswordStrength from '@/components/form/PasswordStrength.vue'
import PasswordValidation from '@/components/form/PasswordValidation.vue'
import { AUTH_ROUTES } from '@/constant'

const { string } = useYup()

const props = defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
})

const signUpStore = useSignUpStore()
const { password: signUpPwd } = storeToRefs(signUpStore)

const { to } = useAuthRouteStore()
const password = reactive({
  value: '',
  error: '',
  check: false,
})

const confirmPassword = reactive({
  value: '',
  error: '',
  check: false,
})

const validation = ref(false)
const schema = string().required().min(8).complexPassword()

const onNextClicked = async () => {
  const schemaConfirm = string().required().oneOf([password.value], { key: 'yup.string.confirmPassword' })
  try {
    await validate(schema, password)
    await validate(schemaConfirm, confirmPassword)

    if (!validation.value || !password.check || !confirmPassword.check) return
    signUpPwd.value = password.value
    to(AUTH_ROUTES.USER_PROFILE)
  } catch (e) {
    console.error(e)
  }
}
</script>
